<style scoped>
  .app-container>>>.el-tabs__nav{
    left: 50%;
    transform: translateX(-50%) !important;
  }
  .app-container>>>.el-tabs__item{
    font-size: 18px;
    color: #aaa;
  }
  .app-container>>>.is-active{
    font-weight: 600;
    color: #409EFF;
  }
  pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
  .string { color: green; }
  .number { color: darkorange; }
  .boolean { color: blue; }
  .null { color: magenta; }
  .key { color: red; }
</style>
<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="id" style="width: 200px;" class="filter-item" placeholder="id" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-model="merchant_name" style="width: 200px;" class="filter-item" placeholder="商家名称" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-model="key" style="width: 200px;" class="filter-item" placeholder="配置名称" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-model="key_name" style="width: 200px;" class="filter-item" placeholder="中文注释" clearable @keyup.enter.native="handleFilter"/>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <div>
        <el-button type="primary" @click="addConfig()">添加</el-button>
      </div>
      <el-dialog :visible.sync="innerVisible" title="添加配置" style="width:100%; margin-right:300px;">
        <el-form label-position="left" label-width="110px" style="width: 400px; margin-left:50px;">
          <el-form-item label="选择商家" prop="id">
            <el-select v-model="value" placeholder="请选择商家" clearable class="filter-item">
              <el-option
                v-for="item in merchantList"
                :key="item.id"
                :label="item.merchantName"
                :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="配置名称(英文)" prop="configuration_EN">
            <el-input v-model="configuration_EN" placeholder="配置名称(英文)"/>
          </el-form-item>
          <el-form-item label="中文注释" prop="configuration_CH">
            <el-input v-model="configuration_CH" placeholder="配置名称（中文注释）"/>
          </el-form-item>
          <el-form-item label="配置内容" prop="configuration_content">
            <el-input v-model="configuration_content" placeholder="配置内容" type="textarea" autosize/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">立即创建</el-button>
            <el-button @click="close()">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <div class="filter-container">
      <el-checkbox v-model="showMerchant.id" label="id">id</el-checkbox>
      <el-checkbox v-model="showMerchant.merchantID" label="商家ID">商家ID</el-checkbox>
      <el-checkbox v-model="showMerchant.merchant_name" label="商家名称">商家名称</el-checkbox>
      <el-checkbox v-model="showMerchant.key" label="配置名称">配置名称</el-checkbox>
      <el-checkbox v-model="showMerchant.key_name" label="中文注释">中文注释</el-checkbox>
    </div>
    <el-table v-loading="listLoading" :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column v-if="showMerchant.id" align="center" label="id">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="showMerchant.merchantID" align="center" label="商家ID">
        <template slot-scope="scope">
          <span>{{ scope.row.merchantID }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="showMerchant.merchant_name" align="center" label="商家名称">
        <template slot-scope="scope">
          <span>{{ scope.row.merchant_name }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="showMerchant.key" align="center" label="配置名称">
        <template slot-scope="scope">
          <span>{{ scope.row.key }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="showMerchant.key_name" align="center" label="中文注释">
        <template slot-scope="scope">
          <span>{{ scope.row.key_name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-dialog :visible.sync="dialogVisible" title="查看配置" append-to-body style="width:100%; margin-right:300px;">
            <div style="text-align: left;background: #F4F5F7;">
              <pre v-html="content_json"/>
            </div>
          </el-dialog>
          <editPage :row_data="scope.row"/>
          <el-button type="warning" icon="el-icon-tickets" circle title="查看" @click="showJson(scope.row)"/>
          <el-button type="danger" icon="el-icon-delete" circle title="删除" style="margin-left: 2px;" @click="del(scope.row.id)"/>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination :current-page="page" :page-sizes="[10,20,30, 50]" :page-size="pagesize" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
import { getSearchLists, invoke, forbidden, sendMessage } from '@/api/merchant/merchant'
import store from '@/store'
import waves from '@/directive/waves' // 水波纹指令
import addPage from './addPage'
import editPage from './editPage'
import { getList, getMerchantListSelect, updateMerchantConfig, deleteMerchant } from '@/api/merchant/merchant_config'
export default {
  name: 'DragDialogDemo',
  directives: {
    elDragDialog,
    waves
  },
  components: { addPage, editPage },
  data() {
    return {
      showMerchant: {
        id: true,
        merchantID: true,
        key: true,
        key_name: true,
        merchant_name: true
      },
      value: '',
      innerVisible: false,
      dialogVisible: false,
      auditStatus: [{
        value: 'P',
        label: '审核成功'
      }, {
        value: 'F',
        label: '审核失败'
      }, {
        value: 'A',
        label: '审核中'
      }, {
        value: 'U',
        label: '未审核'
      }],
      activeName: 'first',
      act_item: null,
      list_a: [],
      list_p: [],
      list_f: [],
      list_u: [],
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        id: undefined,
        merchant_name: undefined,
        adminAccount: undefined,
        adminPassword: undefined,
        paymentCode: undefined,
        auditStatus: undefined,
        merchantTotalMoney: undefined,
        merchantRevenue: undefined,
        merchantExpenditure: undefined,
        status: undefined,
        phone: undefined,
        page: 1,
        limit: 20
      },
      pagesize: 20,
      merchantList: [],
      formThead: {
        id: true,
        merchant_name: true,
        adminAccount: true,
        adminPassword: true,
        paymentCode: true,
        auditStatus: true,
        merchantTotalMoney: true,
        merchantRevenue: true,
        merchantExpenditure: true,
        status: false,
        phone: false
      },
      content_json: '',
      merchant_ID: '',
      configuration_EN: '',
      configuration_CH: '',
      configuration_content: '',
      page: 1,
      id: '',
      merchantID: '',
      key: '',
      key_name: '',
      merchant_name: ''
    }
  },
  created() {
    this.getLists()
  },
  methods: {
    addConfig() {
      this.innerVisible = true
      getMerchantListSelect(store.getters.token, { auditStatus: 'P' }).then(response => {
        this.merchantList = response.data.list.data
        this.listLoading = false
      })
    },
    submitForm() {
      const configuration_EN = this.configuration_EN
      const merchant_ID = this.value
      const configuration_CH = this.configuration_CH
      const configuration_content = this.configuration_content
      if (configuration_EN === '') {
        this.$message({
          type: 'info',
          message: '配置名称(英文)不得为空!'
        })
        return false
      }
      if (merchant_ID === '') {
        this.$message({
          type: 'info',
          message: '商家ID不得为空!'
        })
        return false
      }
      if (configuration_CH === '') {
        this.$message({
          type: 'info',
          message: '中文注释不得为空!'
        })
        return false
      }
      if (configuration_content === '') {
        this.$message({
          type: 'info',
          message: '配置内容不得为空!'
        })
        return false
      }
      updateMerchantConfig(store.getters.token, { key: configuration_EN, key_name: configuration_CH, merchantID: merchant_ID, content: configuration_content }).then(res => {
        if (res.data.status === true) {
          this.getLists()
          this.$message({
            type: 'success',
            message: '添加成功'
          })
          this.close()
        } else {
          this.$message({
            type: 'info',
            message: res.data.msg
          })
        }
      })
    },
    close() {
      this.innerVisible = false
    },
    syntaxHighlight(json) {
      if (typeof json !== 'string') {
        json = JSON.stringify(json, undefined, 2)
      }
      json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
      return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
        var cls = 'number'
        if (/^"/.test(match)) {
          if (/:$/.test(match)) {
            cls = 'key'
          } else {
            cls = 'string'
          }
        } else if (/true|false/.test(match)) {
          cls = 'boolean'
        } else if (/null/.test(match)) {
          cls = 'null'
        }
        return '<span class="' + cls + '">' + match + '</span>'
      })
    },
    showJson(rowData) {
      this.dialogVisible = true
      // this.content_json = rowData.content_json
      this.content_json = JSON.parse(rowData.content)
      this.content_json = this.syntaxHighlight(this.content_json)
      console.log(rowData)
    },
    verified(phone, id) {
      this.$confirm('是否审核成功,是否继续', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        sendMessage(store.getters.token, phone, id).then(res => {
          if (res.status) {
            this.$message({
              type: 'success',
              message: '已经通过审核，已发送短信通知客户!'
            })
          }
          this.getLists()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消审核操作'
        })
      })
    },
    handleClick(tab) {
      console.log('tab----', this.activeName)
    },
    invoke(id) {
      invoke(store.getters.token, { id: id, index: 'index' }).then(res => {
        this.$message({
          message: '启用成功',
          type: 'success'
        })
        this.getLists()
      })
    },
    forbidden(id) {
      forbidden(store.getters.token, { id: id, index: 'index' }).then(res => {
        this.$message({
          message: '禁用成功',
          type: 'success'
        })
        this.getLists()
      })
    },
    getLists() {
      this.dialogTableVisible = true
      this.listLoading = true
      const page = this.page
      const pagesize = this.pagesize
      const id = parseInt(this.id)
      const key = this.key
      const key_name = this.key_name
      const merchant_name = this.merchant_name
      // console.log('page', page)
      getList(store.getters.token, { id: id, page: page, pagesize: pagesize, key: key, key_name: key_name, merchant_name: merchant_name }).then(response => {
        this.list = response.data.list.data
        console.log('list', this.list)
        this.listLoading = false
      })
    },
    getSearchLists() {
      this.listLoading = true
      getSearchLists(store.getters.token, this.listQuery).then(response => {
        this.list = response.data.list.data
        console.log(this.list)
        const len = this.list.length
        for (var i = 0; i < len; i++) {
          console.log(this.list[0].auditStatus)
          if (this.list[i].auditStatus === 'A') {
            this.list_a.push(this.list[i])
            continue
          }
          if (this.list[i].auditStatus === 'P') {
            this.list_p.push(this.list[i])
            continue
          }
          if (this.list[i].auditStatus === 'F') {
            this.list_f.push(this.list[i])
            continue
          }
          if (this.list[i].auditStatus === 'U') {
            this.list_u.push(this.list[i])
            continue
          }
        }
        this.total = response.data.list.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.page = 1
      this.getLists()
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.getLists()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getLists()
    },
    del(id) {
      this.$confirm('此操作将会删除该记录,是否继续', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        this.$message.info('正在删除' + id)
        deleteMerchant(store.getters.token, { id: id }).then(res => {
          this.$message.info('已经删除' + id)
          this.getLists()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '删除失败!'
        })
      })
    }
  }
}
</script>
